/* eslint-disable react/jsx-fragments */
/* eslint-disable jsx-a11y/no-autofocus */
/* eslint-disable react/no-children-prop */
import React, { forwardRef } from 'react';

import { ReactComponent as Close } from '@/assets/images/auth/Close.svg';
import { ReactComponent as Eye } from '@/assets/images/auth/Eye.svg';
import { ReactComponent as EyeClosed } from '@/assets/images/auth/EyeClosed.svg';
import { ReactComponent as SmallClose } from '@/assets/images/auth/SmallClose.svg';
import cn from 'classnames';
import { useWindowSize } from 'usehooks-ts';

import s from './Input.module.scss';
import { InputProps } from './Input.props';
import { Validated } from './Validated';

export const Input = forwardRef<HTMLInputElement, InputProps>(
  (
    {
      validated,
      handleHidePassword,
      handleShowPassword,
      isPasswordHidden,
      isFilled,
      isModal,
      hidden,
      profile,
      accepted,
      disabled,
      isHeight,
      isAuthField,
      isNotAccepted,
      isClose,
      className,
      onClear,
      isNotAcceptedText,
      isDifferentMargin,
      isPasswordField,
      isPasswordFieldReg,
      isFeedback,
      id,
      isAutoFocus,
      isEmailField,
      setClick,
      isUnfocusedValidated,
      ...props
    }: InputProps,
    ref,
  ): JSX.Element => {
    const { width } = useWindowSize();
    const inputRef = React.useRef<HTMLInputElement>(null);
    React.useEffect(() => {
      if (isAutoFocus) {
        inputRef?.current?.focus();
      }
    }, [inputRef?.current]);
    return (
      <React.Fragment>
        <label htmlFor={id} style={{ position: 'relative', width: '100%' }}>
          <input
            autoComplete="off"
            autoFocus={isAutoFocus}
            className={cn(
              s.input,
              {
                [s.validated]: validated,
                [s.accepted]: accepted,
                [s.isHeight]: isHeight,
                [s.isModal]: isModal,
                [s.isNotAccepted]: isNotAccepted && (isAuthField || isEmailField || isPasswordField),
                [s.isFeedback]: isFeedback,
                [s.isDisabled]: disabled,
                [s.disabledProfile]: disabled && profile,
              },
              className,
            )}
            disabled={disabled}
            id={id}
            inputMode={isEmailField ? 'email' : 'text'}
            ref={ref || inputRef}
            type={isEmailField ? 'email' : undefined}
            {...props}
          />
          {isClose && (
            <span className={s.close} onClick={onClear}>
              {width > 1024 ? <Close /> : <SmallClose />}
            </span>
          )}
          {isPasswordField &&
            (hidden ? (
              <span className={s.eye} onClick={handleHidePassword}>
                <Eye />
              </span>
            ) : (
              <span className={s.eye} onClick={handleShowPassword}>
                <EyeClosed />
              </span>
            ))}
        </label>
        {isNotAccepted && (isAuthField || isEmailField || isPasswordField) && (
          <Validated children={isNotAcceptedText} isPasswordField={isNotAcceptedText === 'Минимум 6 символов'} />
        )}
        {isPasswordFieldReg && (
          <Validated children={isNotAcceptedText} isPasswordField={isNotAcceptedText === 'Минимум 6 символов'} />
        )}
      </React.Fragment>
    );
  },
);
